<template>
  <div class="review-container">
    <!-- 项目列表 -->
    <el-card class="project-list">
      <h2>待评审项目列表</h2>
      <el-table :data="projects" @row-click="handleRowClick">
        <el-table-column prop="username" label="申请人" width="120"></el-table-column>
        <el-table-column prop="projectName" label="项目名称" width="180"></el-table-column>
        <el-table-column prop="projectType" label="项目类型" width="120"></el-table-column>
        <el-table-column prop="supervisor" label="指导老师" width="120"></el-table-column>
        <el-table-column prop="reviewer" label="评审专家" width="120"></el-table-column>

        <!-- 项目概述（带hover效果） -->
        <el-table-column label="项目概述" width="200">
          <template slot-scope="{row}">
            <el-popover placement="top-start" width="400" trigger="hover" :content="row.projectOverview">
              <div slot="reference" class="text-ellipsis">{{ row.projectOverview }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="团队介绍" width="200">
          <template #default="{row}">
            <el-popover
                placement="top-start"
                width="400"
                trigger="hover"
                :content="row.teamIntroduction">
              <template #reference>
                <div class="text-ellipsis">{{ row.teamIntroduction }}</div>
              </template>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="计划书" width="120">
          <template #default="{row}">
            <el-link
                :href="row.businessPlan"
                target="_blank"
                type="primary"
            >
              下载查看
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="gitee仓库地址" width="120">
          <template #default="{row}">
            <el-link
                :href="row.gitRepo"
                target="_blank"
                type="primary"
            >
              去往仓库
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="review" label="状态"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                type="primary"
                size="mini"
                :disabled="scope.row.review === '已评审'"
                @click="selectProject(scope.row)"
            >评审</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div style="margin-top: 20px; text-align: center">
      <el-pagination
          background
          :current-page="pageNum"
          :page-size="pageSize"
          :page-sizes="[9]"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="handlePageChange"
      />
    </div>
    <!-- 评审表单 -->
    <el-dialog :visible.sync="showReviewForm" title="项目评审">
      <el-form :model="reviewForm" label-width="120px" ref="reviewForm">
        <el-form-item label="项目创新性" prop="innovation">
          <el-rate
              v-model="reviewForm.innovation"
              :max="10"
              show-score
              score-template="{value} 分"
          ></el-rate>
        </el-form-item>

        <el-form-item label="项目可行性" prop="feasibility">
          <el-rate
              v-model="reviewForm.feasibility"
              :max="10"
              show-score
              score-template="{value} 分"
          ></el-rate>
        </el-form-item>

        <el-form-item label="市场潜力" prop="marketPotential">
          <el-rate
              v-model="reviewForm.marketPotential"
              :max="10"
              show-score
              score-template="{value} 分"
          ></el-rate>
        </el-form-item>

        <el-form-item label="详细评价" prop="comments">
          <el-input
              type="textarea"
              v-model="reviewForm.comments"
              :rows="6"
              placeholder="请输入详细评审意见..."
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitReview(projects.projectName)">提交评审</el-button>
          <el-button @click="showReviewForm = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      projects: [

      ],
      // 保持与第二个组件相同的分页参数
      pageNum: 1,
      pageSize: 9,
      total: 0,
      loading: false,
      showReviewForm: false,
      selectedProject: null,
      reviewForm: {
        projectname:'',
        innovation: 0,
        feasibility: 0,
        marketPotential: 0,
        comments: '',
        username:''
      }
    }
  },
  created(){
  this.ooo()
},
  methods: {
    selectProject(project) {

      this.selectedProject = project
      this.showReviewForm = true
    },
    handlePageChange(val) {
      this.pageNum = val;
      this.ooo();
    },

    async ooo() {
      try {
        this.loading = true;
        const res = await this.$request.get('/expert/selectProject0', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
        });

        this.projects = res.data?.records || [];
        this.total = res.data?.total || 0;
      } catch (error) {
        console.error('获取数据失败:', error);
        this.$message.error('数据加载失败');
      } finally {
        this.loading = false;
      }
    },


    async submitReview() {
      try {
        this.reviewForm.projectname=this.selectedProject.projectName
        this.reviewForm.username=this.selectedProject.username
        // 调用API提交评审结果
        const response = await this.$request.post('/expert/review', {
          ...this.reviewForm
        })

        // 更新项目状态
        const index = this.projects.findIndex(p => p.id === this.selectedProject.id)
        this.projects[index].status = '已评审'

        this.showReviewForm = false
        this.$message.success('评审提交成功！')
        this.ooo();
      } catch (error) {
        this.$message.error('提交失败，请重试')
      }
    }
  }
}
</script>

<style scoped>
.review-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.project-list {
  margin-bottom: 20px;
}

.el-table {
  cursor: pointer;
}

.el-rate {
  margin-top: 8px;
}
.app-container {
  padding: 20px;
}
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>